<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%String ctx = request.getContextPath();%>
<title>exam list</title>
</head>

<script>

	$(document).ready(function(){
		$.ajax(
			{
				dataType: "json",
				type: "GET",
				url: "<%=ctx%>/clazz?act=getAll",	
				data: {},	
				success: function(data, status) {
					let select = $("#class")
					select.empty();
					let idx = 1;
					$.each(data, function(i, e) {
						select.append("<option value='" + e.id + "'>"+ e.name +"</option>");
						idx += 1;
					})
				},
				error: function(req, status, msg) {
					alert(msg)
				}
			}
		)
	});
	
	function addToClass() {
		let id_arr = []
        $("input[name='ck']:checked").each(function() {
        	id_arr.push(this.value)
        });
		if(id_arr.length  === 0) {
			alert("请选择考试")
			return;
		}
		let className = $("#class").find("option:selected").text();

		let idarrayStr = '&idarray='
		
		for(let i=0; i<id_arr.length ; ++i) {
			if(i===id_arr.length-1) {
				idarrayStr += id_arr[i] + ''
			} else {
				idarrayStr += id_arr[i] + '&idarray='
			}
		}
		$.ajax(
			{
				type:"GET",
				url: '<%=ctx%>/exam?act=addToClass' + idarrayStr,
				dataType: "json",
				data: {
					"classname":className,
				},
				success: function(data, status) {
					alert(data);
				},
			  	error: function(req, status, msg) {
				 	alert(msg);
			  	}
			}
		)
	}

	function createExam() {
		let examName = $("#examname").val();
		if(examName.length === 0) {
			alert('请输入考试名称');
		} else {
			$.ajax(
				{ type:"POST",
				  url: "<%=ctx%>/exam?act=addExam",
				  data: {
						"examname" :examName
					},	
				  success: function(data, status) {
					  alert(data);
					  AjaxLoad('<%=ctx%>/control?act=examOpera');
				  },
				  error: function(req, status, msg) {
					  alert(msg)
				  }
				}
			)
		}
	}
	function removeExam(examId) {
	}

	function setExam(examId, enable) {
		$.ajax(
				{ type:"POST",
					url: "<%=ctx%>/exam?act=setExam",
					data: {
						"id" :examId,
						"enable" :enable
					},
					success: function(data, status) {
						if(data.length > 0) {
							alert(data);
						}
						AjaxLoad('<%=ctx%>/control?act=examOpera');
					},
					error: function(req, status, msg) {
						alert(msg)
					}
				}
		)
	}
</script>


<body>
	<div id="list" class="col-md-10 col-xs-12">
		<h3>考试列表</h3>
		<hr>
		<div class="fiter col-md-10 col-xs-12">
			<form action="" class="form-horizontal form-inline">
				<input class="form-control" type="text" id="examname" placeholder="考试名称">
				<button type="button" class="btn btn-success" onclick="createExam()">创建考试</button>
			</form>
		</div>
  
  		<div class="fiter col-md-10 col-xs-12">
				<br>
				<form action="" class="form-horizontal form-inline">
					<select class="form-control" id="class"/>
					<button type="button" class="btn btn-primary" onclick="addToClass()">添加考试</button>
				</form>
		</div>
		
<table class="table table-hover">
	<thead> <tr>
			<th>选择</th>
			<th>序号</th>
			<th>考试</th>
			<th>状态</th>
			<th>操作</th>
	</tr></thead>
	
	<tbody id="exambody"> 
	<c:forEach items="${ExamList}" var="Exam" varStatus="s">
		<tr>
				<td><input name="ck" type="checkbox" value="${Exam.id}"></td>
				<td>${s.index + 1}</td>
				<td>${Exam.name}</td>
				<c:choose>
					<c:when test="${Exam.enable eq 'True'}">
						<td style="width: 100px">正在进行</td>
					</c:when>
					<c:otherwise>
						<td style="width: 100px">已暂停</td>
					</c:otherwise>
				</c:choose>
				<td>
<button type="button" class="btn btn-success" onclick="setExam('${Exam.id}', 1)">
						开始</button>
<button type="button" class="btn btn-warning" onclick="setExam('${Exam.id}', 0)">
						暂停</button>
<button type="button" class="btn btn-primary" onclick="">
						重命名</button>
<button type="button" class="btn btn-danger" onclick="removeExam('${Exam.id}')">
						删除</button>
				</td>
		</tr>
	</c:forEach>
	</tbody>
</table>
	</div>
</body>
</html>